<template>
	<div class='item'>
		<p>
			<span class="nick">{{name}}</span> 
			<label v-html='_msg'></label>
			<em class="fa-caret-right fa"></em>
		</p>
		<img :src='imgsrc' alt="" />
	</div>
</template>

<script type="text/ecmascript">
	export default {
		props: {
			name: String,
			msg: String,
			imgsrc: String
		},
		data:{
			_msg:''
		},
		created(){
			this._msg=this.msg;
			this.vmsg();
		},
		methods: {
			vmsg() {
				let reg = /\[:emo(\d+)\$\]/g;
				if(reg.test(this._msg)) {
					this._msg = this._msg.replace(reg,'<img class="emj" src="/static/img/qq/$1.png" />');
				}
			}
		}
	}
</script>

<style lang='scss' scoped="scoped">
	@import "../assets/style/_mixin";
	.item {
		margin: 40px 0;
		position: relative;
		text-align: right;
		img {
			position: absolute;
			right: 0;
			top: -5px/$ppr;
			display: inline-block;
			width: 80px/$ppr;
			height: 80px/$ppr;
			border-radius: 40px/$ppr;
			vertical-align: middle;
			margin-left: 15px;
		}
		p {
			padding: 10px/$ppr 20px/$ppr;
			box-sizing: border-box;
			background: #98E165;
			word-break: break-all;
			white-space: normal;
			position: relative;
			vertical-align: middle;
			font-size: 36px/$ppr;
			min-width: 80px/$ppr;
			color: #333;
			border-radius: 10px/$ppr;
			display: inline-block;
			text-align: left;
			max-width: calc(100% - 2rem);
			margin-right: 2rem;
			span.nick {
				position: absolute;
				top: -45px/$ppr;
				left: 0;
				font-size: 26px/$ppr;
				color: #999;
			}
			em {
				color: #98E165;
				position: absolute;
				right: -12px/$ppr;
				top: 18px/$ppr;
				
			}
		}
	}
</style>